<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* @keyframes
        规定动画。
        animation
        所有动画属性的简写属性，除了animation-play-state)属性。
        animation-name
        规定@keyframes动画的名称。（必须的）
        animation-duration
        规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的）
        animation-timing-function
        规定动画的速度曲线，默认是“ease”。
        animation-delay
        规定动画何时开始，默认是0。
        animation-iteration-count
        规定动画被播放的次数，默认是1，还有infinite
        animation-direction
        规定动画是否在下一周期逆向播放，默认是“"normal“,alternate逆播放
        animation-play-state
        规定动画是否正在运行或暂停。默认是"running",还有"pause"。
        animation-fill-mode
        规定动画结束后状态，保持forwardsl回到起始backwards */
      @keyframes move {
        0% {
          transform: translate(0px, 0px);
        }
        25% {
          transform: translate(0px, 1000px);
        }
        50% {
          transform: translate(1000px, 1000px);
        }
        75% {
          transform: translate(1000px, 0px);
        }
        100% {
          transform: translate(0px, 0px);
        }
      }
      div {
        width: 200px;
        height: 200px;
        background-color: skyblue;
      }
      div:hover {
        /* animation-name: move; */
        /* animation-duration: 5s; */
        /* 运动曲线 */
        /* animation-timing-function: ease-in; */
        /* 何时开始 */
        /* animation-delay: 1s; */
        /* 重复次数 */
        /* animation-iteration-count: infinite; */
        /* 是否反向播放 */
        /* animation-direction: alternate; */
        animation: move 4s linear 0s infinite alternate forwards;
      }
      /* 动画简写：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态， */
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>
